<!-- 修改费用 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="mains-tlt">
    <div></div>
    <div>违章内容</div>
  </div>
  <page-form :model="form" layout="vertical" ref="formRef" class="page-form">
    <div class="mains">
      <page-form-row>
        <page-form-item label="罚款" size="1/2" :rules="{ required: true, message: '请输入罚款' }">
          <a-input-number
            :max="99999999.99"
            :min="0"
            placeholder="请输入"
            v-model="form.feeList[0].amount"
            @blur="count()"
            hide-button
            :precision="2"
            :max-length="10"
          >
            <template #suffix> 元 </template>
          </a-input-number>
        </page-form-item>
        <page-form-item label="代办费用" size="1/2">
          <a-input-number
            :max="99999999.99"
            :min="0"
            placeholder="请输入"
            v-model="form.feeList[1].amount"
            @blur="count()"
            hide-button
            :precision="2"
            :max-length="10"
          >
            <template #suffix> 元 </template>
          </a-input-number>
        </page-form-item>
      </page-form-row>
      <div class="mains-line"></div>
      <div class="all-count">
        <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff; margin-top: 17px" /> -->
        <icon-exclamation-circle style="font-size: 16px; color: #165dffff; margin-top: 17px" />
        <text>合计：</text>
        <span>{{ maintenanceAmount ? maintenanceAmount : '0' }}元</span>
      </div>
      <div class="mains-line" style="margin-top: 16px"></div>
      <page-form-row style="margin-top: 16px">
        <page-form-item label="是否支持违章押金自动抵扣" size="1">
          <a-radio-group v-model="form.violationDepositType">
            <a-radio :value="item.value" v-for="item in vEnumList" :key="item.value">
              {{ item.label }}
            </a-radio>
          </a-radio-group>
        </page-form-item>
      </page-form-row>
    </div>
  </page-form>

  <page-form-footer @ok="submitFn" :ok-loading="okLoading" />
  <mains ref="maintenance" :type="1" @saveCheck="getCheck" />
</template>

<script setup name="CarMaintenanceEditFees">
  import { ref, onMounted } from 'vue'
  import { getViolationFeeInfo, getViolationFeeEdit } from '@/api/finance/costConfirm'
  import { useRoute, useRouter } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const routeQuery = route.query
  const vEnumList = ref([
    { value: 1, label: '支持' },
    { value: 2, label: '不支持' },
  ])
  const id = ref(null)
  const okLoading = ref(false)
  const formRef = ref(null)

  const getDetail = (id) => {
    getViolationFeeInfo({ id: id }).then((res) => {
      const result = res.result
      console.log('result', result)
      form.value.violationDepositType = result.violationDepositType
      form.value.feeList[0].amount =
        result.feeDetailList[0].itemName == '罚款' ? result.feeDetailList[0].amount : result.feeDetailList[1].amount
      form.value.feeList[1].amount =
        result.feeDetailList[1].itemName == '代办费用' ? result.feeDetailList[1].amount : result.feeDetailList[0].amount
      count()
    })
  }

  const form = ref({
    id: routeQuery.id,
    violationDepositType: undefined,
    feeList: [
      {
        itemName: '罚款',
        amount: undefined,
      },
      {
        itemName: '代办费用',
        amount: undefined,
      },
    ],
  })
  // 计算价格
  const maintenanceAmount = ref(null)
  const count = () => {
    maintenanceAmount.value =
      (form.value.feeList[0].amount ? form.value.feeList[0].amount : 0) + (form.value.feeList[1].amount ? form.value.feeList[1].amount : 0)
  }
  const submitFn = (noticeSuccess) => {
    formRef.value.validate((error) => {
      if (!error) {
        okLoading.value = true
        getViolationFeeEdit({ ...form.value })
          .then((res) => {
            if (res.code == 200) {
              noticeSuccess()
              router.go(-1)
            }
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }

  onMounted(() => {
    id.value = routeQuery.id
    if (id.value) {
      getDetail(id.value)
    }
  })
</script>

<style lang="less" scoped>
  .mains-tlt {
    font-size: 14px;
    color: #1d2129;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    div:nth-child(1) {
      width: 3px;
      height: 16px;
      background-color: #165dff;
    }
    div:nth-child(2) {
      color: #1d2129;
      font-size: 14px;
      font-weight: 500;
      margin: 0 16px 0 8px;
    }
    .choose-mains {
      display: inline-block;
      padding: 5px 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      background: #1890ff;
      border-radius: 2px;
    }
  }
  .mains {
    position: relative;
    width: 100%;
    // background-color: rgba(247, 248, 250, 0.5);
    padding: 20px;

    .mains-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .mains-item {
        margin-top: 10px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #e5e6eb;
        border-radius: 2px;
      }
    }
    .mains-form-items {
      width: 100%;
      .mains-form-item {
        width: 100%;
        .mains-form-tlt {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .mains-form-tlt-name {
            color: var(--color-text-1);
            font-weight: 500;
          }
          .main-icon {
            margin-left: 22px;
            cursor: pointer;
          }
        }
        .mains-form-in {
          width: 100%;
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // .mains-form-initem {
          //   width: 20%;
          //   margin-right: 10px;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: flex-start;
          //   align-items: flex-start;
          // }
          .mains-form-in-c {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .mains-line {
          width: 100%;
          height: 1px;
          background-color: #f2f3f5;
          margin: 20px 0;
        }
      }
    }
  }
  .operate-btn {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    user-select: none;
    padding: 0 5px;
    icon {
      margin-right: 8px;
    }
    &.del {
      color: #ea0000;
    }
    &.new {
      color: #165dff;
    }
  }
  .box {
    width: 200px;
    height: 40px;
    border: 1px solid wheat;
  }
  .box:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search {
    display: flex;
    margin-bottom: 20px;
  }
  .quick-search-item {
    width: 16%;
    height: 62px;
    padding: 9px 0 9px 16px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #e5e8ef;
  }
  .quick-search-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search-item-checked {
    background: #e8f3ff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #1890ff;
  }
  .quick-search-item:nth-of-type(n + 2) {
    margin-left: 20px;
  }
  .quick-search-item-label {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
  }
  .quick-search-item-value {
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
  }
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .second-stage {
    width: 200px;
    margin-left: 260px;
  }
  .third-stage {
    width: 200px;
    margin-left: 30px;
  }
  .page-form {
    margin: 0;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .mains-line {
    width: 100%;
    height: 1px;
    background-color: #f2f3f5;
  }
  .all-count {
    width: 100%;
    text-align: right;
    color: var(--color-text-1);
    font-size: 14px;
    margin-top: 12px;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
</style>
